<template>
  <view>
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        indicator-active-color="#0173DE"
        indicator-color="#fff"
      >
        <swiper-item v-for="(item, index) in list" :key="index">
          <view class="swiper-item uni-bg-red">
            <image :src="item.cover_cdn"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 预约表单 -->
    <view class="project">
      <u--form :model="project" ref="add" :errorType="errorType" :rules="rules">
        <!-- 选择的服务 -->
        <view class="item">
          <u-form-item
            label="预约服务"
            labelWidth="70"
            prop="projectname"
            @click="ProShow = true"
          >
            <u--input
              v-model="project.projectname"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择预约服务"
              border="none"
            >
            </u--input>
            <u-icon slot="right" name="arrow-right"> </u-icon>
          </u-form-item>
        </view>

        <!-- 预约的上门地址 -->
        <view class="item">
          <u-form-item
            label="上门地址"
            labelWidth="70"
            prop="address"
            @click="AddrShow = true"
          >
            <u--input
              v-model="project.address"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择上门地址"
              border="none"
            >
            </u--input>
            <u-icon slot="right" name="arrow-right"> </u-icon>
          </u-form-item>
        </view>

        <!-- 预约时间 -->
        <view class="item">
          <u-form-item
            label="预约时间"
            labelWidth="70"
            prop="createtime_text"
            @click="DateShow = true"
          >
            <u--input
              v-model="project.createtime_text"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择预约时间"
              border="none"
            >
            </u--input>
            <u-icon slot="right" name="arrow-right"> </u-icon>
          </u-form-item>
        </view>

        <!-- 预约备注 -->
        <view class="item">
          <u-form-item labelWidth="70" prop="content">
            <u--textarea
              v-model="project.content"
              placeholder="请输入预约备注"
              height="70"
              count="true"
            >
            </u--textarea>
          </u-form-item>
        </view>

        <!-- 提交按钮 -->
        <view class="but">
          <button form-type="submit" :customStyle="BtnStyle" @click="submit">
            我要预约
          </button>
        </view>
      </u--form>
    </view>

    <!-- 预约服务的选择器 -->
    <u-picker
      :show="ProShow"
      :columns="prolist"
      ref="uPicker"
      keyName="name"
      @confirm="ProChange"
      @change="changePrice"
      closeOnClickOverlay="true"
      @close="ProShow = false"
      @cancel="ProShow = false"
    >
    </u-picker>

    <!-- 上门地址 -->
    <u-picker
      :show="AddrShow"
      :columns="addrlist"
      keyName="name"
      @confirm="AddrChange"
      closeOnClickOverlay="true"
      @close="AddrShow = false"
      @cancel="AddrShow = false"
    >
    </u-picker>

    <u-datetime-picker
      ref="datetimePicker"
      :show="DateShow"
      mode="datetime"
      v-model="project.createtime"
      closeOnClickOverlay="true"
      @close="DateShow = false"
      @confirm="DateChange"
      @cancel="DateShow = false"
    >
    </u-datetime-picker>

    <!-- 消息提示的组件 -->
    <u-toast ref="uToast"></u-toast>
    <u-notify ref="uNotify"></u-notify>
  </view>
</template>
<script>
export default {
  async onShow() {
    this.$u.auth.check()
    // 获取本地存储的信息
    let LoginUser = uni.getStorageSync('LoginUser')
    // console.log(uni.getStorageSync('LoginUser'))

    this.LoginUser = LoginUser

    let result = await this.$u.api.index.banner();

    this.list = result.data

    this.ProType()

    this.AddressList()

    this.$refs.add.setRules(this.rules)
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      list: [],
      LoginUser: null,
      errorType: ['toast'],
      prolist: [],
      prolistPrice: [],
      ProShow: false,
      addrlist: [],
      AddrShow: false,
      DateShow: false,
      project: {
        projectid: 0,
        projectname: '',
        addrid: 0,
        address: '',
        createtime: Number(new Date()),
        createtime_text: '',
        content: ''
      },
      rules: {
        projectname: [
          {
            required: true,
            message: '请选择预约服务',
            trigger: ['change', 'blur'],
          }
        ],
        address: [
          {
            required: true,
            message: '请选择上门地址',
            trigger: ['change', 'blur'],
          }
        ],
        createtime_text: [
          {
            required: true,
            message: '请选择预约时间',
            trigger: ['change', 'blur'],
          }
        ],
      },
    }
  },

  methods: {
    changePrice(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      // console.log(columnIndex);
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.prolistPrice[index])
      }
    },
    async ProType() {
      let result = await this.$u.api.project.ProjectType()
      let data = []
      let dataValue = []
      this.prolist = []
      if (result.code == 1) {
        for (let item of result.data) {
          data.push(item)
          dataValue.push(item.price + "元")
          // console.log(item);
        }
      }
      let priceValue = []
      for (let item of dataValue) {
        // console.log(item);
        priceValue.push([item])
      }
      this.prolistPrice = priceValue
      this.prolist.push(result.data)
      this.prolist.push([data[0]['price'] + "元"])
      // console.log(this.prolistPrice);
    },
    ProChange(item) {
      let value = item.value[0]
      this.project.projectid = value.id
      this.project.projectname = value.name
      this.project.projectprice = value.price
      // console.log(this.project);
      this.ProShow = false
    },
    async AddressList() {
      let data = {
        userid: this.LoginUser.id
      }

      let result = await this.$u.api.user.addressIndex(data)

      if (result.data.length < 0) {
        this.addrlist = [
          [
            {
              name: '暂无上门地址'
            }
          ]
        ]

        return false
      }

      let list = []
      this.addrlist = []
      for (let item of result.data) {
        list.push({
          id: item.id,
          name: item.provinces.name + item.citys.name + item.districts.name + item.address
        })
      }

      this.addrlist.push(list)
    },
    AddrChange(item) {
      let value = item.value[0]

      this.project.addrid = value.id

      this.project.address = value.name

      this.AddrShow = false
    },
    DateChange(item) {
      // console.log(item)
      let now = Number(new Date()) + 60 * 60 * 1000

      if (item.value < now) {
        this.$refs.uToast.show({
          type: 'error',
          message: '请提前一个小时',
          icon: true,
          position: 'top'
        })
        return false
      }

      // let value = Math.floor(item.value / 1000)
      // this.project.createtime = value

      this.project.createtime = item.value
      this.project.createtime_text = this.$u.timeFormat(item.value, 'yyyy-mm-dd hh:MM:ss')

      this.DateShow = false

    },
    submit() {
      this.$refs.add.validate().then(async (res) => {
        let data = {
          userid: this.LoginUser.id,
          addrid: this.project.addrid,
          projectid: this.project.projectid,
          content: this.project.content,
          createtime: Math.floor(this.project.createtime / 1000)
        }

        let result = await this.$u.api.project.OrderAdd(data)
        // console.log(result);
        if (result.code === 1) {
          this.$refs.uNotify.show({
            type: 'success',
            message: result.msg,
            duration: 1500
          })

          setTimeout(() => {
            this.$u.route({
              url: result.url,
              type: 'reLaunch'
            })
          }, 1500);

          return false
        } else {
          this.$refs.uNotify.show({
            type: 'error',
            message: result.msg,
            duration: 1500
          })

          return false
        }

      }).catch(() => { })
    }
  }
}
</script>

<style>
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 50rpx;
}

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}

.uni-margin-wrap image {
  width: 100%;
}

.service {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.service {
  width: 670rpx;
  height: auto;
  padding: 20rpx 45rpx 20rpx 35rpx;
  border-bottom: 1rpx solid #cccccc;
}

.service-name {
  width: 80%;
  font-size: 36rpx;
}

.service-price {
  font-size: 36rpx;
}

picker {
  color: #000;
  padding: 20rpx;
  border-radius: 20rpx;
  font-size: 36rpx;
  border: 1rpx solid #ccc;
  margin: 20rpx;
  box-shadow: 0 0 10px #ddd;
}

button {
  width: 400rpx;
  background-color: #0173de;
  color: white;
  opacity: 0.7;
  box-shadow: 0 0 10px #ddd;
  font-size: 34rpx;
  margin-bottom: 30rpx;
}

.button-hover {
  color: white;
  opacity: 1;
  background-color: #0173de;
}

.but {
  margin-top: 50rpx;
}

picker view {
  font-size: 30rpx;
}

.project {
  width: 90%;
  margin: 0 auto;
}

.project .item {
  color: #000;
  padding: 0rpx 20rpx;
  border-radius: 20rpx;
  font-size: 36rpx;
  border: 1rpx solid #ccc;
  margin: 20rpx;
  box-shadow: 0 0 10px #ddd;
  background-color: #fff;
}

.project .item .u-form-item {
  padding: 0rpx;
}

.project .u-input {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>
